<!--
* @description 标签栏 三级菜单
!-->

<template>
  <div>
    <el-tabs
      v-model="activeName"
      v-if="$store.state.thirdMenu.length"
      @tab-click="switchTabs"
      type="card"
    >
    <slot></slot>
      <el-tab-pane
        v-for="item in $store.state.thirdMenu"
        :key="item.id"
        :label="item.name"
        :name="item.path"
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: "tabs",
  props: {
    limit: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      value: "",
      activeName: '',
    };
  },
  created() {
    this.activeName = this.$route.path
  },
  activated(){
    //防止keep-alive内组件缓存不刷新tabs
    this.activeName = this.$route.path
  },
  methods: {
    switchTabs(tab, event) {
      console.log(tab.label, tab.name);
      this.$router.push(tab.name);
      // this.activeName = tab.name
      console.log('this.activeName',this.activeName)
      console.log('$store.state.thirdMenu',this.$store.state.thirdMenu)
    },
  },
};
</script>
